<template>
  <div class="info">
    <div class="title_add">结算分类</div>
    <div class="cat">
      <el-select v-model="classification" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="title_add">结算规则</div>
    <div class="tab">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane
          v-for="(item, index) in Tabs"
          :key="index"
          :label="item.title"
          :name="item.name"
        >
          <div v-if="index === 0">
            <el-row>
              <el-col :span="12">
                <el-form
                  :model="ruleData.mch"
                  ref="mch"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="服务费">
                    <el-input
                      type="number"
                      min="0"
                      v-model="ruleData.mch.ratio"
                      placeholder="请输入默认比例"
                    >
                      <template slot="append">%</template></el-input
                    >
                  </el-form-item>
                  <el-form-item label="手续费">
                    <el-input
                      type="number"
                      min="0"
                      v-model="ruleData.mch.fee"
                      placeholder="请输入默认比例"
                    >
                      <template slot="append">%</template></el-input
                    >
                  </el-form-item>
                  <el-tabs class="tabs_type" type="border-card">
                    <el-tab-pane
                      v-for="(item, i) in Tabs1"
                      :key="i"
                      :label="item.title"
                      :name="item.name"
                    >
                      <div v-if="i === 0">
                        <div class="l">
                          <div class="flex">
                            <div>自己：</div>
                            <el-input
                              type="number"
                              min="0"
                              v-model="ruleData.mch.list.cash.my"
                              placeholder="请输入自己比例"
                            >
                              <template slot="append">%</template>
                            </el-input>
                          </div>
                        </div>
                        <div class="purchase">
                          <div
                            class="purchase_con"
                            v-for="(v, n) in ruleData.mch.list.cash.recoms"
                            :key="n"
                          >
                            <div class="l">
                              <div class="flex">
                                <div>推荐人：</div>
                                <el-input
                                  type="number"
                                  min="0"
                                  v-model="ruleData.mch.list.cash.recoms[n]"
                                  placeholder="请输入推荐人比例"
                                >
                                  <template slot="append">%</template>
                                </el-input>
                              </div>
                            </div>
                            <div
                              v-if="n === 0"
                              @click="handleAddRate(i, 'mch', 'cash')"
                            >
                              <i class="el-icon-plus hand_cs"></i>
                            </div>
                            <div>
                              <i
                                v-if="n != 0"
                                @click="handleDelRate(i, n, 'mch', 'cash')"
                                class="el-icon-delete hand_cs"
                              ></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="i === 1">
                        <div class="l">
                          <div class="flex">
                            <div>自己：</div>
                            <el-input
                              type="number"
                              min="0"
                              v-model="ruleData.mch.list.redbao.my"
                              placeholder="请输入自己比例"
                            >
                              <template slot="append">%</template>
                            </el-input>
                          </div>
                        </div>
                        <div class="purchase">
                          <div
                            class="purchase_con"
                            v-for="(v, n) in ruleData.mch.list.redbao.recoms"
                            :key="n"
                          >
                            <div class="l">
                              <div class="flex">
                                <div>推荐人：</div>
                                <el-input
                                  type="number"
                                  min="0"
                                  v-model="ruleData.mch.list.redbao.recoms[n]"
                                  placeholder="请输入推荐人比例"
                                >
                                  <template slot="append">%</template>
                                </el-input>
                              </div>
                            </div>
                            <div
                              v-if="n === 0"
                              @click="handleAddRate(i, 'mch', 'redbao')"
                            >
                              <i class="el-icon-plus hand_cs"></i>
                            </div>
                            <div>
                              <i
                                v-if="n != 0"
                                @click="handleDelRate(i, n, 'mch', 'redbao')"
                                class="el-icon-delete hand_cs"
                              ></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="i === 2">
                        <div class="l">
                          <div class="flex">
                            <div>自己：</div>
                            <el-input
                              type="number"
                              min="0"
                              v-model="ruleData.mch.list.iet.my"
                              placeholder="请输入自己比例"
                            >
                              <template slot="append">%</template>
                            </el-input>
                          </div>
                        </div>
                        <div class="purchase">
                          <div
                            class="purchase_con"
                            v-for="(v, n) in ruleData.mch.list.iet.recoms"
                            :key="n"
                          >
                            <div class="l">
                              <div class="flex">
                                <div>推荐人：</div>
                                <el-input
                                  type="number"
                                  min="0"
                                  v-model="ruleData.mch.list.iet.recoms[n]"
                                  placeholder="请输入推荐人比例"
                                >
                                  <template slot="append">%</template>
                                </el-input>
                              </div>
                            </div>
                            <div
                              v-if="n === 0"
                              @click="handleAddRate(i, 'mch', 'iet')"
                            >
                              <i class="el-icon-plus hand_cs"></i>
                            </div>
                            <div>
                              <i
                                v-if="n != 0"
                                @click="handleDelRate(i, n, 'mch', 'iet')"
                                class="el-icon-delete hand_cs"
                              ></i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </el-form>
              </el-col>
            </el-row>
            <div class="next">
              <el-button type="primary" @click="handleNext">下一步</el-button>
            </div>
          </div>
          <div v-if="index === 1">
            <el-row>
              <el-col :span="12">
                <el-form
                  :model="ruleData.user"
                  ref="user"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-tabs class="tabs_type" type="border-card">
                    <el-tab-pane
                      v-for="(item, i) in Tabs1"
                      :key="i"
                      :label="item.title"
                      :name="item.name"
                    >
                      <div v-if="i === 0">
                        <div class="l">
                          <div class="flex">
                            <div>自己：</div>
                            <el-input
                              type="number"
                              min="0"
                              v-model="ruleData.user.list.cash.my"
                              placeholder="请输入自己比例"
                            >
                              <template slot="append">%</template>
                            </el-input>
                          </div>
                        </div>
                        <div class="purchase">
                          <div
                            class="purchase_con"
                            v-for="(v, n) in ruleData.user.list.cash.recoms"
                            :key="n"
                          >
                            <div class="l">
                              <div class="flex">
                                <div>推荐人：</div>
                                <el-input
                                  type="number"
                                  min="0"
                                  v-model="ruleData.user.list.cash.recoms[n]"
                                  placeholder="请输入推荐人比例"
                                >
                                  <template slot="append">%</template>
                                </el-input>
                              </div>
                            </div>
                            <div
                              v-if="n === 0"
                              @click="handleAddRate(i, 'user', 'cash')"
                            >
                              <i class="el-icon-plus hand_cs"></i>
                            </div>
                            <div>
                              <i
                                v-if="n != 0"
                                @click="handleDelRate(i, n, 'user', 'cash')"
                                class="el-icon-delete hand_cs"
                              ></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="i === 1">
                        <div class="l">
                          <div class="flex">
                            <div>自己：</div>
                            <el-input
                              type="number"
                              min="0"
                              v-model="ruleData.user.list.redbao.my"
                              placeholder="请输入自己比例"
                            >
                              <template slot="append">%</template>
                            </el-input>
                          </div>
                        </div>
                        <div class="purchase">
                          <div
                            class="purchase_con"
                            v-for="(v, n) in ruleData.user.list.redbao.recoms"
                            :key="n"
                          >
                            <div class="l">
                              <div class="flex">
                                <div>推荐人：</div>
                                <el-input
                                  type="number"
                                  min="0"
                                  v-model="ruleData.user.list.redbao.recoms[n]"
                                  placeholder="请输入推荐人比例"
                                >
                                  <template slot="append">%</template>
                                </el-input>
                              </div>
                            </div>
                            <div
                              v-if="n === 0"
                              @click="handleAddRate(i, 'user', 'redbao')"
                            >
                              <i class="el-icon-plus hand_cs"></i>
                            </div>
                            <div>
                              <i
                                v-if="n != 0"
                                @click="handleDelRate(i, n, 'user', 'redbao')"
                                class="el-icon-delete hand_cs"
                              ></i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div v-if="i === 2">
                        <div class="l">
                          <div class="flex">
                            <div>自己：</div>
                            <el-input
                              type="number"
                              min="0"
                              v-model="ruleData.user.list.iet.my"
                              placeholder="请输入自己比例"
                            >
                              <template slot="append">%</template>
                            </el-input>
                          </div>
                        </div>
                        <div class="purchase">
                          <div
                            class="purchase_con"
                            v-for="(v, n) in ruleData.user.list.iet.recoms"
                            :key="n"
                          >
                            <div class="l">
                              <div class="flex">
                                <div>推荐人：</div>
                                <el-input
                                  type="number"
                                  min="0"
                                  v-model="ruleData.user.list.iet.recoms[n]"
                                  placeholder="请输入推荐人比例"
                                >
                                  <template slot="append">%</template>
                                </el-input>
                              </div>
                            </div>
                            <div
                              v-if="n === 0"
                              @click="handleAddRate(i, 'user', 'iet')"
                            >
                              <i class="el-icon-plus hand_cs"></i>
                            </div>
                            <div>
                              <i
                                v-if="n != 0"
                                @click="handleDelRate(i, n, 'user', 'iet')"
                                class="el-icon-delete hand_cs"
                              ></i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </el-form>
              </el-col>
            </el-row>
            <div class="next">
              <el-button @click="handleNext">上一步</el-button>
              <el-button type="primary" @click="handleSubmit" v-if="!rowData.id"
                >提交</el-button
              >
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { addRule, settleType } from "@/api/merchant";
export default {
  props: ["rowData", "storeId"],
  data() {
    return {
      loading1: false,
      activeName: "0",
      Tabs: [{ title: "商家" }, { title: "用户" }],
      Tabs1: [{ title: "现金" }, { title: "红包" }, { title: "积分" }],
      page: {
        total: 0,
        pageNum: 1, // 当前页数
        pageSize: 10, // 每页的条数
      },
      ruleData: {
        mch: {
          ratio: "0",
          fee: "0",
          list: {
            cash: { my: "0", recoms: [""] },
            redbao: { my: "0", recoms: [""] },
            iet: { my: "0", recoms: [""] },
          },
        },
        user: {
          list: {
            cash: { my: "0", recoms: [""] },
            redbao: { my: "0", recoms: [""] },
            iet: { my: "0", recoms: [""] },
          },
        },
      },
      options: [],
      classification: "",
    };
  },
  methods: {
    async settleType() {
      const { data, err } = await settleType({});
      if (err === 0) {
        this.options = data;
        if (this.rowData.id) {
          //编辑
          this.classification = this.rowData.class;
          console.log(this.rowData);
          this.ruleData = this.rowData.extend;
        }
      }
    },
    async addRule() {
      const { err } = await addRule({
        ruleData: this.ruleData,
        mid: this.storeId,
        class: this.classification,
      });
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "操作成功",
          type: "success",
        });
        //成功
        this.$emit("closeAddSettle");
      }
    },
    //新增政策与服务
    handleAddRate(index, paramse, paramse1) {
      if (paramse === "mch") {
        //商家
        this.ruleData.mch.list[paramse1].recoms.push("");
      } else {
        this.ruleData.user.list[paramse1].recoms.push("");
      }
    },
    //删除政策与服务
    handleDelRate(index, n, paramse, params1) {
      if (paramse === "mch") {
        //商家
        this.ruleData.mch.list[params1].recoms.splice(n, 1);
      } else {
        this.ruleData.user.list[params1].recoms.splice(n, 1);
      }
    },
    handleNext() {
      if (this.activeName === "0") {
        this.activeName = "1";
      } else if (this.activeName === "1") {
        this.activeName = "0";
      }
    },
    //提交
    handleSubmit() {
      if (this.classification === "") {
        this.$message({
          showClose: true,
          message: "请选择分类",
          type: "warning",
        });
      } else {
        var flag = false;
        for (var k in this.ruleData.mch.list) {
          this.ruleData.mch.list[k].recoms.forEach((v) => {
            if (v === "") {
              flag = true;
              if (document.getElementsByClassName("el-message").length > 0)
                return false;
              this.$message({
                showClose: true,
                message: "请填写完整",
                type: "warning",
              });
            } else {
              flag = false;
            }
          });
        }
        for (var k in this.ruleData.user.list) {
          this.ruleData.mch.list[k].recoms.forEach((v) => {
            if (v === "") {
              flag = true;
              if (document.getElementsByClassName("el-message").length > 0)
                return false;
              this.$message({
                showClose: true,
                message: "请填写完整",
                type: "warning",
              });
            } else {
              flag = false;
            }
          });
        }
        if (!flag) {
          this.addRule();
        }
      }
    },
  },
  created() {
    this.settleType();
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
.title_add {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}
.cat {
  margin-bottom: 20px;
}
.tabs_type {
  margin-left: 35px;
}
.purchase {
  padding-top: 20px;
  box-sizing: border-box;
  .purchase_con {
    display: flex;
    align-items: center;
    font-size: 13px;
    margin-bottom: 20px;

    i {
      font-size: 25px;
      flex-shrink: 0;
    }
  }
}
.l {
  width: 95%;
  font-size: 13px;
  .flex {
    // width: 400px;
    display: flex;
    align-items: center;
    .el-input,
    .el-textarea {
      width: 85%;
    }
    div:nth-child(1) {
      flex-shrink: 0;
      //   margin-bottom: 20px;
    }
  }
}
.tbImg1 {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.slt {
  width: 50px;
  height: 36px;
  margin: 0 auto;
  .tbImg {
    width: 50px;
    height: 36px;
    border-radius: 8px;
  }
}
.info {
  .title {
    font-size: 16px;
    margin-bottom: 13px;
  }
  .tab {
    background-color: #fff;
    // padding: 20px;
    // box-sizing: border-box;
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}
/deep/.el-breadcrumb__inner {
  cursor: pointer !important;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
/deep/.el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
/deep/.el-upload-list__item {
  width: 80px !important;
  height: 80px !important;
  border: 0 !important;
}
.guige_row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 13px;
  .clo {
    width: 20%;
    display: flex;
    justify-content: center;
    .el-input {
      width: 90%;
    }
  }
  //   .clo:nth-child(1) {
  //     width: 15%;
  //   }
  .cz {
    font-size: 26px;
  }
}
.rich_text {
  height: 500px;
}
.next {
  padding: 35px;
  box-sizing: border-box;
}
.avatar-uploader {
  width: 80px;
  height: 80px;
}
</style>
